<template>
	<!--主要内容-->
	<div class="container">
		<div class="type">
			<router-link to="Type">
				<img src="~imgs/home.gif"/>
			</router-link>
		</div>
		<div class="serch">
			<button></button>
			<input type="text" placeholder="请输入你想要搜索的产品" @focus="focuss"></input>
		</div>
		<div class="scan">
			<img src="~imgs/home_2.gif"/>
		</div>
	</div>
</template>

<script>
	export default {
		methods:{
			focuss(){
				this.$router.push("./Search");
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.container
		width: 100%;
		height: 0.88rem;
		overflow: hidden;
		background: #559ae3;
		display: flex;
		div
			float: left;
			display: flex;
			justify-content: space-between;
		.type
			padding: 0.22rem;
			flex: 1;
			img
				width: 0.44rem;
				height: 0.38rem;
		.serch
			width: 5rem;
			height: 0.6rem;
			background: #fff;
			border-radius: 0.4rem;
			margin-top: 0.14rem;
			button
				background: #fff;
				border: none;
				width: 0.8rem;
				height: 0.6rem;
				float: left;
				border-radius: 0.4rem 0 0 0.4rem;
				background: url(../../../../static/images/home_3.gif)no-repeat center;
				background-size: 0.4rem 0.4rem;
			input
				width: 4.2rem;
				height: 0.6rem;
				line-height: 0.6rem;
				overflow: hidden;
				font-size: 0.24rem;
				color: #000;
				float: left;
				border: none;
				border-radius: 0 0.4rem 0.4rem 0;	
				padding: 0;
		.scan
			padding: 0.22rem;
			justify-content: flex-end;
			flex: 1;
			img
				width: 0.51rem;
				height: 0.40rem;
</style>